<template>
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>写帖子</title>
    <link rel="stylesheet" href="../assets/ciyuan_css/luntan_css/naviddation bar.css">
    <link rel="stylesheet" href="../assets/ciyuan_css/luntan_css/editor.css">
  </head>
  <body>
  <div class="daohanlan">
    <div class="left-logo">
      <div class="logo"><img src="../assets/ciyuan_image/luntan_img/xitontubiao.png" width="45" /></div>
      <p>论坛管理信息系统</p>
    </div>
    <!DOCTYPE html>
    <html>
    <head>
      <title>搜索框</title>
      <style>
        .search-box {
          display: inline-block;
          position: absolute;
          top: 10px;
          right: 600px;
          width: 400px;
        }

        .search-box input[type="text"] {
          width: 100%;
          padding: 10px;
          border: none;
          border-radius: 20px;
          background-color: #f2f2f2;
          box-shadow: none;
          transition: box-shadow 0.3s ease;
        }

        .search-box input[type="text"]:focus {
          box-shadow: 0 0 5px #007bff;
        }

        .search-box button {
          position: absolute;
          top: 0;
          right: 0;
          padding: 10px 20px;
          border: none;
          background-color: #007bff;
          color: #fff;
          border-radius: 20px;
          cursor: pointer;
          transition: background-color 0.3s ease;
        }

        .search-box button:hover {
          background-color: #0056b3;
        }
      </style>
      <script>
        function search() {
          var input = document.getElementById("search-input");
          var keyword = input.value;
          // 在这里添加搜索功能的代码
          // ...
          alert("搜索关键字：" + keyword);
        }
      </script>
    </head>
    <body>
    <div class="search-box">
      <input type="text" id="search-input" placeholder="请输入关键字">
      <button onclick="search()">搜索</button>
    </div>
    </body>
    </html>


    <div class="zhanwe"></div>

    <div class="right-function">
      <!DOCTYPE html>
      <html>
      <head>
        <title>写帖子</title>
        <style>
          .button {
            display: inline-block;
            background-color: #0055ff;
            color: #0aee47;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 12px;
            text-decoration: none;
            transition: background-color 0.3s ease;
          }

          .button:hover {
            background-color: #0056b3;
          }
        </style>
      </head>
      <body>
      <router-link to="luntanmaid" class="button">主页</router-link>
      </body>
      </html>
      <!DOCTYPE html>
      <html>
      <head>
        <title>写帖子</title>
        <style>
          .button {
            display: inline-block;
            background-color: #0055ff;
            color: #0aee47;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 12px;
            text-decoration: none;
            transition: background-color 0.3s ease;
          }

          .button:hover {
            background-color: #0056b3;
          }
        </style>
      </head>
      <body>
      <router-link to="/luntanpublish" class="button">写帖子</router-link>
      </body>
      </html>
    </div>
  </div>


  <div class="blog-edit-container">
    <div class="title">
      <input type="text" placeholder="在这里写下主贴标题" id="title">
      <button id="submit">发布帖子</button>
    </div>
    <div class="blog-edit-container">
      <div class="title">
        <input type="text" placeholder="在这里写下内容" id="title">
      </div>



    </div>


    <!DOCTYPE html>
    <html>
    <head>
      <title>添加照片</title>
      <style>
        .container {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-gap: 20px;
          justify-content: center;
          align-items: center;
          max-width: 1200px;
          margin: 0 auto;
        }

        .photo-container {
          position: relative;
          margin: 10px;
          width: 200px;
          height: 200px;
          border: 2px dashed #ccc;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          font-size: 20px;
          color: #000000;
          cursor: pointer;
        }

        .photo-container:hover {
          border-color: #007bff;
          color: #007bff;
        }

        .photo-container input[type="file"] {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
          cursor: pointer;
        }

        .photo-container img {
          max-width: 100%;
          max-height: 100%;
          object-fit: contain;
        }

        .photo-container:nth-child(1) {
          grid-column: 1 / span 1;
          grid-row: 1 / span 1;
        }

        .photo-container:nth-child(2) {
          grid-column: 2 / span 1;
          grid-row: 1 / span 1;
        }

        .photo-container:nth-child(3) {
          grid-column: 3 / span 1;
          grid-row: 1 / span 1;
        }

        .photo-container:nth-child(4) {
          grid-column: 1 / span 1;
          grid-row: 2 / span 1;
        }

        .photo-container:nth-child(5) {
          grid-column: 2 / span 1;
          grid-row: 2 / span 1;
        }

        .photo-container:nth-child(6) {
          grid-column: 3 / span 1;
          grid-row: 2 / span 1;
        }
      </style>
      <script>
        function previewPhoto(event) {
          var container = event.target;
          var file = event.target.files[0];
          var reader = new FileReader();
          reader.onload = function(event) {
            var img = document.createElement("img");
            img.src = event.target.result;
            container.appendChild(img);
          };
          reader.readAsDataURL(file);
        }
      </script>
    </head>
    <body>
    <div class="container">
      <div class="photo-container" onclick="document.getElementById('photo1').click()">
        <span>选择照片</span>
        <input type="file" id="photo1" onchange="previewPhoto(event)">
      </div>
      <div class="photo-container" onclick="document.getElementById('photo2').click()">
        <span>选择照片</span>
        <input type="file" id="photo2" onchange="previewPhoto(event)">
      </div>
      <div class="photo-container" onclick="document.getElementById('photo3').click()">
        <span>选择照片</span>
        <input type="file" id="photo3" onchange="previewPhoto(event)">
      </div>
      <div class="photo-container" onclick="document.getElementById('photo4').click()">
        <span>选择照片</span>
        <input type="file" id="photo4" onchange="previewPhoto(event)">
      </div>
      <div class="photo-container" onclick="document.getElementById('photo5').click()">
        <span>选择照片</span>
        <input type="file" id="photo5" onchange="previewPhoto(event)">
      </div>
      <div class="photo-container" onclick="document.getElementById('photo6').click()">
        <span>选择照片</span>
        <input type="file" id="photo6" onchange="previewPhoto(event)">
      </div>
      <div class="photo-container" onclick="document.getElementById('photo4').click()">
        <span>选择照片</span>
        <input type="file" id="photo4" onchange="previewPhoto(event)">
      </div>
      <div class="photo-container" onclick="document.getElementById('photo5').click()">
        <span>选择照片</span>
        <input type="file" id="photo5" onchange="previewPhoto(event)">
      </div>
      <div class="photo-container" onclick="document.getElementById('photo6').click()">
        <span>选择照片</span>
        <input type="file" id="photo6" onchange="previewPhoto(event)">
      </div>
    </div>
    </body>
    </html>

    <script>
      var content = '# 在这里写下一篇帖子 ##';
      var config = {
        width: "100%",
        height: "100vh",
        markdown: content,
        path: "editor.md/lib/"
      };
      editormd("editor", config);

    </script>
  </div>
  </body>
  </html>
</template>
<script>
export default {
  name:'luntanPublish'
}
</script>